<!doctype html>
<html ng-app="nutApp">
<head>
	<title>Nut</title>
	<link rel="shortcut icon" href="/images/favicon.ico">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js"></script>

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
	<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.js"></script>
	<script src="/script/jquery-3.3.1.min.js"></script>
	<script src="/script/default.js"></script>
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.css" />
	<link rel="stylesheet" type="text/css" href="https://material.angularjs.org/1.1.10/docs.css" />
	<link rel="stylesheet" type="text/css" href="/style/default.css" />
</head>
<body>
	<div id="titles" ng-controller="gridTitlesController as vm" flex ng-cloak>
		<header>
			<ul>
				<li class="left">
					<a id="logo" href="/"><img src="/images/logo.jpg" /></a>
					<input type="text" ng-model="searchText" id="search" placeholder="Search">
					<!--<button class="gear" ng-click="showOptions()" title="Settings">Settings</button>-->
					<button class="update" ng-click="showUpdates()" title="Updates Available">Title Updates</button>
					<!--<button class="queue" ng-click="showQueue()" title="Download Queue">Queue</button>-->
				</li>
				<li class="center">
					<ul id="sorts">
						<li>
							<a ng-click="sortBy('name')">Name<span class="sortorder" ng-show="sortPropertyName === 'name'" ng-class="{sortReverse: sortReverse}"></span></a>
						</li>
						<li>
							<a ng-click="sortBy('releaseDate')">Release Date</a>
						</li>
						<li>
							<a ng-click="sortBy('publisher')">Publisher</a>
						</li>
						<li>
							<select ng-model="preloadedFilter" ng-options="opt.name for opt in preloadedOptions"></select>
						</li>
					</ul>
				</li>
				<li class="right">
					<ul id="regions">
						<li class="{{title.region}} rgn_{{title.region}}" ng-repeat="title in titles | unique:'region'">
							<input ng-checked="title.region == 'US'" name="region_{{title.region}}" id="region_{{title.region}}" type="checkbox" ng-click="regionChanged(title.region)" />
							<label for="region_{{title.region}}">{{title.region}}</label>
						</li>
					</ul>
				</li>
			</ul>
		</header>
		<md-grid-list md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="6" md-cols-gt-lg="10"
					  md-row-height-gt-md="1:1" md-row-height="4:3"
					  md-gutter="8px" md-gutter-gt-sm="4px">

			<md-grid-tile ng-repeat="title in titles | filter:searchText | filter:titleFilter | orderBy:sortPropertyName:sortReverse" md-rowspan="{{title.span.row}}" md-colspan="{{title.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background" style="background-image: url(/api/titleImage/{{title.baseId }}/{{title.thumbSize}})" data-title-id="{{title.id}}" ng-click="showTitle(title)">
				<md-grid-tile-footer><h3>{{title.name}}</h3></md-grid-tile-footer>
			</md-grid-tile>
		</md-grid-list>
		<div id="popup">
			<div id="game" style="background-image: url(/api/bannerImage/{{title.baseId }}/)">
				<div class="container">
					<header>
						<div class="boxart"><img src="/api/frontArtBoxImage/{{title.id}}/96" /></div>
						<ul>
							<li class="title">{{title.name}}</li>
							<li><label>Publisher</label><span>{{title.publisher}}</span></li>
							<li><label>Release Date</label><span>{{title.releaseDate}}</span></li>
							<li><label>Version</label><span>{{title.latestVersion}}</span></li>
							<li><label>Size</label><span>{{title.size}}</span></li>
							<li><label>ID</label><span>{{title.id}}</span></li>
						</ul>
						<div class="controls">
							<!--<a class="update" title="Update Available" ng-show="title.currentVersion < title.latestVersion" ng-click="preload(title.id.substring(0, title.id.length - 3) + '800')">Update</a>-->
							<a class="download" title="Download Game to PC" href="/api/download/{{title.id}}" ng-show="title.base.length > 0">Download</a>
							<!--<a class="install" title="Install Game to Switch" href="/api/install/{{title.id}}" ng-show="title.key && title.base.length > 0 && user && user.switchHost">Install</a>-->
							<!--<a class="update" title="Preload Game" ng-click="preload(title.id)" ng-show="!title.base || title.base.length < 1">Preload</a>-->
						</div>
					</header>
					<div class="description">
						<pre>{{title.description}}</pre>
						<div id="dlc">
							<table>
								<tr ng-repeat="dlc in title.dlc">
									<td>{{getTitle(dlc.titleId).name}}</td>
									<td>{{dlc.version}}</td>
									<!--<td><button class="update" title="Update available" ng-show="getTitle(dlc.titleId).version > dlc.version" ng-click="preload(dlc.titleId)">Update</button></td>-->
									<td><a class="download" href="/api/download/{{getTitle(dlc.titleId).id}}">Download</a></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
				<div id="screenshots">
					<ul class="thumb">
						<li ng-repeat="ss in title.screenshots"><a href="#ss-{{$index}}"><img src="/api/screenshotImage/{{title.id}}/{{$index}}" /></a></li>
					</ul>
					<ul class="viewer">
						<li id="ss-{{$index}}" ng-repeat="ss in title.screenshots"><img src="/api/screenshotImage/{{title.id}}/{{$index}}" /></li>
					</ul>
				</div>
			</div>
			<div id="options">
				<h3>Options</h3>
				<div class="controls">
					<button class="button">Save</button>
				</div>
			</div>
			<div id="queue">
				<h3>Download Queue</h3>
				<div class="content">
					<table>
						<thead>
							<tr>
								<th>&nbsp;</th>
								<th>Title</th>
								<th>Progress</th>
								<th>Speed</th>
								<th>Size</th>
							</tr>
						</thead>
						<tbody ng-repeat="q in queue">
							<tr>
								<td class="icon"><img style="height: 2em;" src="/api/titleImage/{{q.baseId }}/192" /></td>
								<td>{{q.name}}</td>
								<td class="percent"><progress value="{{q.percent}}" max="100"></progress></td>
								<td class="speed">{{q.speed}}</td>
								<td>{{q.sizeFormatted}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="updates">
				<h3>Title Updates Available</h3>
				<div class="content">
					<table>
						<thead>
							<tr>
								<th>&nbsp;</th>
								<th>Title</th>
								<th>Current Version</th>
								<th>New Version</th>
								<!--<th>&nbsp;</th>-->
							</tr>
						</thead>
						<tbody ng-repeat="t in updates">
							<tr>
								<td class="icon"><img style="height: 2em;" src="/api/titleImage/{{t.baseId }}/192" /></td>
								<td>{{t.name}}</td>
								<td>{{t.currentVersion}}</td>
								<td>{{t.newVersion}}</td>
								<!--<td><a class="update" ng-click="preload(t.id)">Preload</a></td>-->
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<button id="close" ng-click="closePopup()">Close</button>
		</div>
	</div>
</body>
</html>